<template>
  <h1>ref创建基本数据类型和对象类型的响应式数据</h1>
  <h2>count:{{count}}</h2>
  <button @click="changeCount">修改count</button>
  <hr>
  <h2>person:{{person}}</h2>
  <button @click="changePerson">修改person</button>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "About",
});
</script>

<script setup lang="ts">
  import {ref} from "vue"

  //1.基本类型
  let count = ref(10)
  const changeCount = () => {
    count.value++
  }

  //定义person的类型
  interface typePerson {
    name?: string,
    age?: number,
    sex?: string,
    like?: string,
    scrol?: string[]
  }

  //2.对象类型
  const person = ref<typePerson>({
    name: "刘二",
    age: 19,
    sex: "男",
    scrol: ["1" , "2" , "3"]
  })
  const changePerson = () => {
    //修改属性
    // person.value.name = "laolang"

    //添加属性
    // person.value.like = "6666"

    //深层次响应式，数组也可以直接响应式
    (person.value.scrol as string[])[0] = "666666"
  }

</script>